<template>
<!--  http://lbsyun.baidu.com/index.php?title=jspopular3.0-->
  <Card style="width: 100%;margin-bottom: 20px">
    <Form :inline="true" :label-width="60">
      <Row>
        <Col span="12">
          <FormItem label="地址">
            <!--<Input  v-model="address" style="margin-right:100px;width: 350px" size="small" placeholder="输入地址,如: 深圳秒加"/>-->
            <Input clearable v-model="address" style="margin-right:100px;width: 350px" size="small" search enter-button="载入地图" @on-search="searchByStationName" placeholder="输入地址,如: 深圳秒加"/>
          </FormItem>
        </Col>
        <!--<Col span span="2" >-->
           <!--<FormItem :label-width="20">-->
              <!--<Button  type="primary"  :disabled="address.length == 0" @click="searchByStationName" size="small" style="height: 26px;line-height: 27px;">载入地图</Button>-->
          <!--</FormItem>-->
        <!--</Col>-->
        <Col span="10" style="margin-left: 30px">
          <FormItem label="准确地址" :label-width="60">
            <Input  v-model="searchaddress" style="width: 350px" size="small" disabled/>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div id="container" style="width: 100%;  height: 450px; border: 1px solid gray;overflow:hidden;"></div>
  </Card>
</template>
<script>
  export default{
    props: ["setPoint"],
    data: function () {
      return {
        searchaddress: '',
        address: '',
        result: '',
        localSearch: null,
        point: null,
        map: null,
      }
    },
    computed: {},
    mounted: function () {
      this.map = new BMap.Map("container");
      this.map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
      this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
      this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
      this.map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
      this.map.addControl(new BMap.MapTypeControl());
//      map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT'}));   //右下角，打开
      this.map.centerAndZoom("翻身地铁站", 12);
      this.localSearch = new BMap.LocalSearch(this.map);
      this.localSearch.enableAutoViewport(); //允许自动调节窗体大小
      //主要有一下四种：
      //BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
      //BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
      //BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
      //BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
    },
    created: function () {

    },
    methods: {
      searchByStationName(value){
        const that = this;
        that.map.clearOverlays();//清空原来的标注
        this.localSearch.setSearchCompleteCallback(searchResult => {
          that.point = searchResult.getPoi(0);
          that.searchaddress =  that.point.address;
          if(that.setPoint){
              that.setPoint(that.point);
          }
          that.map.centerAndZoom(that.point.address, 15);
          var marker = new BMap.Marker(new BMap.Point(that.point.point.lng, that.point.point.lat));  // 创建标注，为要查询的地址对应的经纬度
          that.map.addOverlay(marker);
        });
        that.localSearch.search(that.address);
      },

      searchByAddress(address){
        this.address = address;
        this.searchByStationName();
      },
    },
    components: {}
  }
</script>
<style>

</style>
